<template>
  <div class="app-container">
    <el-form ref="userForm" :model="userForm" :rules="rules" :inline="true">
      <el-form-item
        label="姓名"
        prop="name"
      >
        <el-input v-model="userForm.name" placeholder="管理员姓名" size="small" clearable />
      </el-form-item>
      <el-form-item
        label="邮箱"
        prop="mail"
      >
        <el-input v-model="userForm.mail" placeholder="管理员邮箱" size="small" clearable />
      </el-form-item>
      <el-button type="primary" icon="el-icon-check" size="small" @click="addSubmit('userForm')">新增</el-button>
    </el-form>
    <el-scrollbar :native="false" wrap-class="scrollbar-wrapper">
      <el-table
        :data="tableData"
        stripe
        style="width: 100%; margin: 20px auto"
        max-height="450"
      >
        <el-table-column
          prop="id"
          label="ID"
          width="120"
          align="center"
        />
        <el-table-column
          prop="name"
          label="姓名"
          width="120"
          align="center"
        />
        <el-table-column
          prop="email"
          label="邮箱"
          width="250"
          align="center"
        />
        <el-table-column
          label="操作"
          width="220"
          align="center"
        >
          <template slot-scope="scope">
            <el-button
              type="danger"
              size="small"
              @click.native.prevent="deleteUser(scope.$index, tableData)"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-scrollbar>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      userForm: {
        name: '',
        mail: ''
      },
      rules: {
        name: [
          { required: true, message: '请输入管理员姓名', trigger: 'blur' },
          { min: 2, max: 6, message: '长度在 2 到 6 个字符', trigger: ['blur', 'change'] }
        ],
        mail: [
          { required: true, message: '请输入邮箱地址', trigger: 'blur' },
          { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
        ]
      }
    }
  },
  mounted() {
    this.refreshUserList()
  },
  methods: {
    deleteUser(index, rows) {
      this.$confirm('此操作将永久删除管理员' + rows[index].name + ', 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        center: true
      }).then(() => {
        this.$axios.delete('/api/admin/users/' + rows[index].id).then(resp => {
          if (resp.status === 200) {
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            this.refreshUserList()
          } else {
            this.$message({
              type: 'warning',
              message: '删除失败!'
            })
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    addSubmit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const formData = new FormData()
          formData.append('name', this.userForm.name)
          formData.append('email', this.userForm.mail)
          this.$axios.post(
            '/api/admin/users',
            formData
          ).then(res => {
            if (res.status === 200) {
              this.$message({
                message: '成功新增管理员' + this.userForm.name,
                type: 'success'
              })
              this.refreshUserList()
            } else {
              this.$message.error('新增管理员失败！！')
            }
          })
        } else {
          this.$message.error('新增管理员失败！！')
        }
      })
    },
    refreshUserList() {
      this.$axios.get('/api/admin/users').then(resp => {
        this.tableData = resp.data
      })
    }
  }
}
</script>

<style>
  .app-container {
    width: 100%;
    height: 450px;
  }
  .app-container .el-scrollbar {
    height: 100%;
  }
  /* 最为关键得两个样式代码，可以设置全局滚动条样式，也可以按需设置 */
  .app-container ::-webkit-scrollbar {
    /* 设置竖向滚动条的宽度 */
    width: 5px;
    /* 设置横向滚动条的高度 */
    height: 5px;
  }
  .app-container ::-webkit-scrollbar-thumb {
    /*滚动条的背景色*/
    background-color: rgba(144,147,153,.3);
    border-radius: 35px;
    position: relative;
  }
   .el-button--primary {
     color: #fff;
     background-color: #304156;
     border-color: #304156;
     margin-top: 3px;
   }
</style>
